import { useState, useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom";
import clsx from "clsx";
import styles from "./new-chat-start.module.scss";
import Image from "next/image";
import { Path } from "../constant";
import LogoDongIcon from "../icons/logo-dong.png";
import SendWhiteIcon from "../icons/send-white.svg";
import UploadIcon from "../icons/upload.svg";
import VoiceIcon from "../icons/voice.svg";
import { IconButton } from "./button";
import { Tabs } from "antd";
import type { TabsProps } from "antd";

function CardList(props: { list: { title: string; subTitle: string }[] }) {
  return (
    <div className={styles["card-list"]}>
      {props.list.map((item, index) => (
        <div key={index} className={styles["card-list-item"]}>
          <div className={styles["card-list-item-title"]}>{item.title}</div>
          <div className={styles["card-list-item-sub-title"]}>
            {item.subTitle}
          </div>
        </div>
      ))}
    </div>
  );
}

export function NewChatStart() {
  const navigate = useNavigate();
  const chatContainerRef = useRef<HTMLDivElement>(null);
  const policyList = [
    { title: "政策查询", subTitle: "项目开工政策法规查询" },
    { title: "政策查询", subTitle: "项目开工政策法规查询" },
  ];
  const processList = [
    { title: "流程指引", subTitle: "项目开工流程指引" },
    { title: "流程指引", subTitle: "项目开工流程指引" },
  ];
  const sensitiveList = [
    { title: "敏感点", subTitle: "项目开工敏感点" },
    { title: "敏感点", subTitle: "项目开工敏感点" },
  ];

  useEffect(() => {
    if (chatContainerRef.current && window.particleground) {
      window?.particleground(chatContainerRef.current, {
        dotColor: "rgba(50, 150, 146, 0.4)",
        lineColor: "rgba(50, 150, 146, 0.1)",
      });
    }
  }, []);

  const tabItems: TabsProps["items"] = [
    {
      key: "1",
      label: "政策法规",
      children: <CardList list={policyList} />,
    },
    {
      key: "2",
      label: "流程指引",
      children: <CardList list={processList} />,
    },
    {
      key: "3",
      label: "敏感点",
      children: <CardList list={sensitiveList} />,
    },
  ];

  return (
    <div className={clsx(styles["new-chat-start"])} ref={chatContainerRef}>
      <div className={styles["start-container"]}>
        <div className={styles["start-container-header"]}>
          <div className={styles["start-container-header-img"]}>
            <Image
              src={LogoDongIcon.src}
              alt="header-img"
              width={121}
              height={121}
            />
          </div>
          <div className={styles["start-container-header-title"]}>
            Hi,我是前包,有什么可以帮到您?
          </div>
        </div>
        <div className={styles["start-container-body"]}>
          <div className={styles["chat-input-panel"]}>
            <textarea
              className={styles["chat-input"]}
              placeholder="请输入问题"
            />
            <IconButton
              icon={<SendWhiteIcon />}
              type="primary"
              className={styles["chat-input-send-text"]}
              onClick={() => {}}
            />
            <IconButton
              icon={<UploadIcon />}
              type="default"
              className={styles["chat-input-send-file"]}
              onClick={() => {}}
            />
            <IconButton
              icon={<SendWhiteIcon />}
              text="深度思考"
              type="primary"
              className={styles["chat-input-send-deep"]}
              onClick={() => {}}
            />
            <IconButton
              icon={<VoiceIcon />}
              type="default"
              className={styles["chat-input-send-voice"]}
              onClick={() => {}}
            />
          </div>
          {/* 切换面板 */}
          <div className={styles["start-container-panel"]}>
            <div className={styles["start-container-panel-question"]}>
              您可以试着问?
            </div>
            <Tabs
              defaultActiveKey="1"
              items={tabItems}
              centered={true}
              indicator={{ size: 20 }}
              className={styles["start-container-panel-tabs"]}
            />
          </div>
        </div>
      </div>
    </div>
  );
}
